<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 240px;
            height: 240px;
            display: flex;
            /* 决定主轴的方向，默认主轴方向为x轴方向，水平向右 */
            /* 1.column 从上往下 */
            flex-direction: row;

            justify-content: space-around;
            background-color: pink;
        }

        span {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>
<script>
    /**
     * flex-direction属性决定主轴的方向，默认主轴方向为x轴方向，水平向右
     * column 从上往下
     * row 水平向右 默认值 从左到右
     * row-reverse 从右到左
     * column-reverse 从上到下
     */


    /**
     *justify-content 设置主轴上的子元素排列方式 使用这个属性之前一定要确定好主轴是哪个  
     * flex-start 默认值 从头部开始 如果主轴是x轴，则从左到右
     * flex-end 从尾部开始排列
     * center 在主轴居中对齐（如果主轴是x轴则水平居中）
     * space-around 平分剩余空间
     * space-between 先两边贴边 再平分剩余空间
     */


    /**
     * flex-wrap 设置子元素是否换行 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
     * nowrap  默认值，不换行
     * wrap 换行
     */ 


    /**
     * flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
     */
</script>